<div id="todo_screen" class="easyui-tabs" style="padding:1px;height=200px;overflow:false;">  
    <div title="Artist ToDo List" closable="false" style="overflow:hidden;">  
    	<div style="padding: 10px">
			<table id="artist_todo" ></table>
		</div>
    </div>  
    <div title="Admin ToDo List" closable="false" style="overflow:false;padding:0px;"> 
    	<div style="padding: 10px"> 
        	<table id="admin_todo" ></table>
        </div>
    </div>  
    <div title="Sales ToDo List" iconCls="icon-reload" closable="false" style="padding:0px;">  
        <div style="padding: 10px">
        	<table id="sales_todo" ></table>
        </div>
    </div>  
</div>

<div id="artisttoolbar">
	<table cellpadding="5" cellspacing="0" style="width:100%;">  
        <tr>  
            <td>  
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newToDo('artist')">New</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editToDo('#artist_todo')">Edit</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeToDo('#artist_todo')">Remove</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="finishToDo('#artist_todo')">Finish</a>
			</td>
			
			<td class="toolbarlabel_right"> <!-- tool bar label align to the right -->
				status: <select class="easyui-combobox" style="width:70px"  valueField="status" id="artist_statusId" textField="text">
		        			<option value="open">Open</option>  
					    	<option value="finished">Finished</option>  
					    	<option value="deleted">Removed</option>
					    </select>
				Due Date From: <input class="easyui-datebox" style="width:80px" id="artist_fromDateId" >  
		        To: <input class="easyui-datebox" style="width:80px" id="artist_toDateId">
		        <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"  onclick="searchToDo('artist')">Search</a>
		        
		    </td>

		 </tr>
	</table>	
</div>

<div id="salestoolbar">
	<table cellpadding="0" cellspacing="0" style="width:100%" >  
        <tr>  
            <td>  
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newToDo('sales')">New</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editToDo('#sales_todo')">Edit</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeToDo('#sales_todo')">Remove</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="finishToDo('#sales_todo')">Finish</a>
			</td>
			<td class="toolbarlabel_right">
			status: <select class="easyui-combobox" style="width:70px"  valueField="status" id="sales_statusId" textField="text">
		       			<option value="open">Open</option>  
				    	<option value="finished">Finished</option>  
				    	<option value="deleted">Removed</option>
				    </select>
			Due Date From: <input class="easyui-datebox" style="width:80px" id="sales_fromDateId" >  
		       To: <input class="easyui-datebox" style="width:80px" id="sales_toDateId">
		       <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"  onclick="searchToDo('sales')">Search</a>
		   </td>
		    <td style="width:10px"></td>
		</tr>
	</table>	
</div>

<div id="admintoolbar" >
	<table cellpadding="0" cellspacing="0" style="width:100%">  
        <tr>  
            <td> 
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newToDo('admin')">New</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editToDo('#admin_todo')">Edit</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeToDo('#admin_todo')">Remove</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="finishToDo('#admin_todo')">Finish</a>
			</td>
			<td class="toolbarlabel_right">
			status:  <select class="easyui-combobox" style="width:70px"  valueField="status" id="admin_statusId" textField="text">
		       			<option value="open">Open</option>  
				    	<option value="finished">Finished</option>  
				    	<option value="deleted">Removed</option>
				    </select>
			Due Date From: <input class="easyui-datebox" style="width:80px" id="admin_fromDateId" >  
		       To: <input class="easyui-datebox" style="width:80px" id="admin_toDateId">
		       <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"  onclick="searchToDo('admin')">Search</a>
		   </td>

			<td style="width:10px"></td>
			</tr>
	</table>
			
</div>



<div id="toDoEditor" class="easyui-dialog" style="width:500px;height:390px; padding:0px 20px 0px 20px" closed="true" buttons="#dlg-buttons">
	<div class="ftitle">ToDo Editor</div>
	<form id="fm" name="fm" method="post" novalidate>
		<input type="hidden" id="orderId" >
		<input type="hidden" id="id" >
		<input type="hidden" id="fmurl" >
		<span>
		<div class="fitem">
			<label>Due Date:</label>
			<!-- <input name="dueDate" id="dueDate" type="text" class="easyui-datebox" required="required" style="width:150px;"></input>  -->
			<input name="dueDate" id="dueDate" type="text" class="easyui-datebox" style="width:150px;" required="required" ></input>	
		</div>
		<div class="fitemmsg" id="dueDateMsg"></div>		
		</span>
		<div class="fitem">
			<label>Priority:</label>
			<select id="priority" class="easyui-combobox" name="priority" style="width:150px;" required="true" data-options="required:true">  
			    <option value="normal">Normal</option>  
			    <option value="high">High</option>  
			</select> 
		</div>
		<div class="fitemmsg" id="priorityMsg"></div>
		<div class="fitem">
			<label>Owner:</label>
			<select id="owner" class="easyui-combobox" name="owner" style="width:150px;" required="true" >  
			    <option value="admin">Admin</option>  
			    <option value="sales">Sales</option>  
			    <option value="artist">Artist</option>  
			</select> 
		</div>
		<div class="fitemmsg" id="ownerMsg"></div>
		<div class="fitem">
        <label>Description:</label>
        <textarea id="desc" name="desc" class="easyui-validatebox" style="height:150px;width:400px;" required="true"></textarea>  
    	</div>
    	<div class="fitemmsg" id="descMsg"></div>
		
	</form>
</div>
	<div id="dlg-buttons" style="padding:10px 10px 10px 0px">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveToDo()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#toDoEditor').dialog('close')">Cancel</a>
	</div>


<script type="text/javascript">
		$(document).ready(function () {
			$('#artist_todo').datagrid({  
			    url:'getToDoList.json',
			    queryParams: {
					owner: 'artist'					
				},
			    rownumbers: true,
			    fitColumns: true,
			    nowrap: false,
			    remoteSort: false,
			    height:420,
			    striped: true,
			    singleSelect: true,
			    toolbar: '#artisttoolbar',
				columns:[[  
				        {title:'Due Date',field:'dueDate',align:'left',width:100, sortable:true,
				        	formatter: function(value,row,index){
									return $.format.date(new Date(value), "MMM-dd-yyyy");
							}	        
				        }, 
				        {title:'Description',field:'desc',align:'left', width:300},  
				        {title:'Priority',field:'priority',align:'center', width:30, sortable:true},
				        {title:'Status',field:'status',align:'center',width:30}  
				    ]],
			    onDblClickRow: function(rowIndex, rowData){
			    	editToDo('#artist_todo');
				}			    
			});
			
			$('#admin_todo').datagrid({  
			    url:'getToDoList.json',
			    queryParams: {
					owner: 'admin'					
				},
			    rownumbers: true,
			    fitColumns: true,
			    nowrap: false,
			    remoteSort: false,
			    height:420,
			    striped: true,
			    singleSelect: true,
			    toolbar: '#admintoolbar',
				columns:[[  
				        {title:'Due Date',field:'dueDate',align:'left',width:100, sortable:true,
				        	formatter: function(value,row,index){
									return $.format.date(new Date(value), "MMM-dd-yyyy");
							}	        
				        }, 
				        {title:'Description',field:'desc',align:'left', width:300},  
				        {title:'Priority',field:'priority',align:'center', width:30, sortable:true},
				        {title:'Status',field:'status',align:'center',width:30}  
				    ]],
			    onDblClickRow: function(rowIndex, rowData){
			    	editToDo('#admin_todo');
				}
			});
			
			$('#sales_todo').datagrid({  
			    url:'getToDoList.json',
			    queryParams: {
					owner: 'sales'					
				},
			    rownumbers: true,
			    fitColumns: true,
			    nowrap: false,
			    remoteSort: false,
			    height:420,
			    striped: true,
			    singleSelect: true,
			    toolbar: '#salestoolbar',
				columns:[[  
				        {title:'Due Date',field:'dueDate',align:'left',width:100, sortable:true,
				        	formatter: function(value,row,index){
									return $.format.date(new Date(value), "MMM-dd-yyyy");
							}	        
				        }, 
				        {title:'Description',field:'desc',align:'left', width:300},  
				        {title:'Priority',field:'priority',align:'center', width:30, sortable:true},
				        {title:'Status',field:'status',align:'center',width:30}  
				    ]], 
			
			    onDblClickRow: function(rowIndex, rowData){
			    	editToDo('#sales_todo');
				}
			
			});	
			

			$('#dueDate').datebox({
				onSelect: function(date){
					//alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
					$('#dueDateMsg').html('');
				}
			});
			
			$('body').layout('panel', 'center').panel('setTitle', 'ToDo List');
			

		});
		
		
		function newToDo(owner){
			$('#toDoEditor').dialog('open').dialog('setTitle','New ToDo');
			$('#fm').form('clear');
			// alert($('#todo_screen').tabs('getSelected').prop('title'));			
			$('#owner').combobox('select', owner);
			$('#fmurl').val('saveToDo.json');
			$('#dueDateMsg').html('');
			// $('#priorityMsg').html('');
			// $('#ownerMsg').html('');
			// $('#descMsg').html('');
			url = 'saveToDo.json';
		}

		function saveToDo(){  
		    $('#fm').form('submit',{  
		        // url: 'saveToDo.json',
		        url: $('#fmurl').val(),
		        onSubmit: function(){  
		            return $(this).form('validate');  		            
		        },  
		        success: function(result){
		        	// alert(result);
		            var result = eval('('+result+')');  
		            // alert(result);
		            if (result.success){  
		                $('#toDoEditor').dialog('close');      // close the dialog  
		                $('#artist_todo').datagrid('reload');
		                $('#sales_todo').datagrid('reload'); 
		                $('#admin_todo').datagrid('reload'); 
		                $.messager.show({  
		                    title: 'Result',  
		                    msg: 'ToDo has been saved successfully.'  
		                });  
		            } else {
		            	// $('#dueDateMsg').html(result.dueDateMsg);
		            	/* $('#priorityMsg').html(result.priorityMsg);
		            	$('#ownerMsg').html(result.ownerMsg);
		            	$('#descMsg').html(result.descMsg); */  
		                
		            	$.messager.show({  
		                    title: 'Error',
		                    width: 400,
                            height: 200,
                            timeout: 15000,
		                    msg: result.msg  
		                }); 
		            }  
		        }  
		    });  
		}  
		
		
		function removeToDo(dataGridName){		
			
		    var row = $(dataGridName).datagrid('getSelected');
		    
		     // alert('in removeToDo:' + row.id);
		    if (row){  
		        $.messager.confirm('Confirm','<b>Are you sure you want to remove following ToDo?</b><br><br>' + row.desc, function(r){  
		            if (r){  
		                $.post('removeToDo.json',{id:row.id},function(result){  
		                    if (result.success){  
				                $(dataGridName).datagrid('reload');
				                // $('#sales_todo').datagrid('reload'); 
				                // $('#admin_todo').datagrid('reload');  // reload the user data  
				                $.messager.show({  
				                    title: 'Result',  
				                    msg: 'ToDo has been removed successfully.'  
				                }); 
		                    } else {		                    	
		                        $.messager.alert({   // show error message  
		                            title: 'Error',		                            
		                            width: 400,
		                            height: 200,
		                            html: result.msg
		                            // msg: result.msg  
		                        });  
		                    }  
		                },'json');  
		            }  
		        });  
		    }else{
		    	$.messager.alert('Alert','Please select the ToDo to be removed.');
		    	return false;
		    } 
		}  
		
		function editToDo(dataGridName){
			var row = $(dataGridName).datagrid('getSelected');			
			// alert(row.id + "|" + row.orderId);
			if (row){
				row.dueDate = ($.format.date(new Date(row.dueDate), "MM/dd/yyyy"));
				$('#id').val(row.id);
				$('#orderId').val(row.orderId);
				$('#toDoEditor').dialog('open').dialog('setTitle','Edit ToDo');
				$('#fm').form('load',row);				
				// url = 'updateToDo.json';
				$('#fmurl').val('updateToDo.json?id='+row.id+"&orderId="+row.orderId);
			}else{
				$.messager.alert('Alert','Please select the ToDo to be edited.');
		    	return false;
			}
		}
		
		
		function finishToDo(dataGridName){		
			
		    var row = $(dataGridName).datagrid('getSelected');

		    if (row){  
		        $.messager.confirm('Confirm','<b>Are you sure you have finished following ToDo?</b><br><br>' + row.desc, function(r){  
		            if (r){  
		                $.post('finishToDo.json',{id:row.id},function(result){  
		                    if (result.success){  
				                $(dataGridName).datagrid('reload');
				                $.messager.show({  
				                    title: 'Result',  
				                    msg: 'ToDo has been updated successfully.'  
				                }); 
		                    } else {		                    	
		                        $.messager.alert({   // show error message  
		                            title: 'Error',		                            
		                            width: 400,
		                            height: 200,
		                            html: result.msg
		                            // msg: result.msg  
		                        });  
		                    }  
		                },'json');  
		            }  
		        });  
		    }else{
		    	$.messager.alert('Alert','Please select the ToDo you have finished.');
		    	return false;
		    } 
		} 
		
		function searchToDo(owner){
			$('#'+owner+'_todo').datagrid('load',{  
				status: $('#'+owner+'_statusId').datebox('getValue'),
				fromDate: $('#'+owner+'_fromDateId').datebox('getValue'),
				toDate: $('#'+owner+'_toDateId').datebox('getValue'),
				owner: owner, 
		    });
		}  
		
		
</script>
